<template>
  <!-- 推荐课程--------------------------------------  p2------------------------------------------------ -->
  <div class="container-homework">
    <!-- 蒙层 -->
    <div class="add_meng" v-show="downMeng">
      <div class="add_box">
        <p>请选择您负责的班级</p>
        <div class="add_search">
          <el-form :inline="true" :model="formScreen" class="demo-form-inline">
            <el-form-item>
              <el-select
                v-model="formScreen.gradeId"
                clearable
                placeholder="选择年级"
                @change="changeGrade"
              >
                <el-option
                  v-for="item in gradeIds"
                  :key="item.gradeId"
                  :label="item.gradeName"
                  :value="item.gradeId"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="formScreen.classId"
                clearable
                placeholder="选择班级"
              >
                <el-option
                  v-for="item in downTemplateClass"
                  :key="item.id"
                  :label="item.className"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="formScreen.sex" clearable placeholder="性别">
                <el-option
                  v-for="item in sexs"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="add_buttons">
          <p @click="downclose_meng()">取消</p>
          <p @click="downTemplateExcel">下载</p>
        </div>
        <div class="close_box" @click="downclose_meng()">
          <img src="../../assets/imgs/icon_xtgb@2x.png" />
        </div>
      </div>
    </div>

    <!-- 筛选搜索 -->
    <div class="screen">
      <div class="tworow">
        <div class="twoleft">
          <el-input
            v-model="termId"
            placeholder="请输入考试ID或名称"
            clearable
            class="change_input1"
          ></el-input>
          <div class="block">
            <el-date-picker
              v-model="termTime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
        </div>

        <div
          class="tworight"
          @click="$router.push({ path: '/creat_exam', query: { types: 1 } })"
        >
          <el-button>创建考试</el-button>
        </div>
      </div>
    </div>
    <!-- 内容列表 -->
    <el-divider></el-divider>
    <div class="conList">
      <div class="conHeader">
        <div>
          当前结果：<span>总计 {{ total }} 条记录</span>
        </div>
        <el-select
          v-model="search.custom"
          class="zidingyi"
          placeholder="自定义显示列"
        >
          <!-- <el-option label="男" value="0"></el-option>
          <el-option label="女" value="1"></el-option> -->
        </el-select>
      </div>
      <el-table stripe :data="tableData" v-loading="loading" style="width: 100%">
        <el-table-column prop="id" label="考试ID" width="80"> </el-table-column>
        <el-table-column prop="name" label="考试名称" width="150">
        </el-table-column>
        <el-table-column prop="type_text" label="类型" width="80">
        </el-table-column>
        <el-table-column prop="dateBegin" label="时间">
          <template slot-scope="scope">
            {{ scope.row.dateBegin }} -- {{ scope.row.dateEnd }}
          </template>
        </el-table-column>
        <el-table-column prop="state_text" label="状态" width="80">
          <template slot-scope="scope">
            <span :style="scope.row.state == 0? 'color: #ecc84a;': (scope.row.state == 1 ? 'color: #0fdd8d;' : 'color: #fe756b;')">
              {{scope.row.state_text}}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="gradeInfo_text" label="年级"> </el-table-column>
        <el-table-column prop="exam_one" label="考试项目"> </el-table-column>
        <!-- <el-table-column prop="old_price" label="负责人" width="80">
        </el-table-column> -->
        <el-table-column prop="operation" label="操作" width="100">
          <template slot-scope="scope">
            <!-- <el-button
              type="primary"
              @click="toEdit(scope.row.id)"
            >操作</el-button> -->
            <el-select
              v-model="operVal"
              @change="change(scope.row.id, scope.row.type, scope.row.name)"
              placeholder="操作"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        background
        layout="total, prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page="page"
        @current-change="changePage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script> 
import { exam_list, delete_exam_list, getClsTree, dowmAchievement, bind_report } from '@/api/index'
export default {
  name: 'homework-sup',
  data() {
    return {
      downMeng: false,
      loading: true,
      formScreen: {
        // project: '',
        gradeId: null,  //年级id
        sex: null,  //性别
        classId: null //班级id
      },
      sexs: [{ // 性别
        value: 1,
        label: '男'
      }, {
        value: 2,
        label: '女'
      }],
      show_meng: false,
      value1: '',
      search: {
        // date: '', // 选择日期
        gradeId: '',
        type: 1, // 选择体测/技能表
        sex: '', // 选择性别
        custom: "", // 自定义
      },
      // 分页
      total: 1000,
      // 列表数据
      tableData: [],
      options: [{
        value: '1',
        label: '修改'
      }, {
        value: '2',
        label: '查看成绩'
      }, {
        value: '3',
        label: '上传成绩'
      }, {
        value: '4',
        label: '导出成绩'
      }, {
        value: '5',
        label: '生成报告'
      }, {
        value: '6',
        label: '删除'
      }],
      // operVal
      operVal: '',
      gradeId: '',
      gradeIds: [],
      downTemplateClass: [],
      // 总条数
      total: 0,
      // 每页多少条
      pageSize: 8,
      //页码
      page: 1,
      // 数据加载时
      loading: true,
      termId: '', //考试id
      termTime: '',//考试时间
      down_id: '',  //下载的考期id
      down_type: '', //下载的类型
      down_name: "" //下载的成绩名称
    }
  },
  created() {
    this.get_exam_list();
    this.getClassTree();
  },
  methods: {
    // 年级、班级树
    async getClassTree() {
      const data = {
        orgId: JSON.parse(sessionStorage.getItem('userMsg')).orgCode
      }
      const res = await getClsTree(data);
      console.log("年级树", res);
      var arr = res.data.data;
      if (res.data.errorCode === "0") {
        for (const i in arr) {
          arr[i].className = arr[i].gradeName;
        }
        this.data = arr;
        this.gradeIds = arr
      }
      console.log("年级树+", arr);
    },

    // 生成报告


    async shengcheng_roport(id) {
      const data = {
        orgId: JSON.parse(sessionStorage.getItem('userMsg')).orgCode,
        termId: id
      }
      const res = await bind_report(data);
      console.log("生成报告", res);

      if (res.data.errorCode === "0") {
        this.$message({
          type: 'success',
          message: '报告生成成功！'
        });
      }

    },

    // 下载模板
    async downTemplateExcel() {
      var isGradeId = this.formScreen.gradeId;
      var isclassid = this.formScreen.classId;
      var issex = this.formScreen.sex;
      if (isGradeId == null || isGradeId == '') {
        this.$message({
          message: '请先选择匹配项',
          type: 'warning'
        });
        return
      }

      if (isGradeId == null) {
        this.$message({
          type: 'warning',
          message: '请选择年级!'
        });
        return;
      }
      var isClassId = this.formScreen.classId
      const data = {
        type: this.down_type,
        orgId: JSON.parse(sessionStorage.getItem('userMsg')).orgCode,
        termId: this.down_id, //考期id
        gradeId: isGradeId,   //年级id
        sex: issex,
        classId: isclassid  // 班级id
      }
      const res = await dowmAchievement(data)
      console.log('dowmExcel', res);
      let blob = new Blob([res.data], {
        type: 'application/vnd.ms-excel'
      })
      let url = window.URL.createObjectURL(blob)
      let a = document.createElement('a')
      a.href = url
      a.download = `${this.down_name}.xlsx`
      a.click()
      window.URL.revokeObjectURL(a.href)
    },
    // 考试管理列表
    async get_exam_list() {
      const queryParam = JSON.parse(sessionStorage.getItem('userMsg'));
      var times = this.termTime;
      if (times != '') {
        times = this.switchTimeFormat(this.termTime);
      }
      const res = await exam_list({
        orgId: queryParam.orgCode,
        pageNo: this.page,
        pageSize: this.pageSize,
        termId: this.termId,  //考试id
        termTime: times //考试时间
      })
      console.log('考试管理列表信息', res);
      if (res.data.errorCode == '0') {
        this.loading = false
        var arr = res.data.data.list;
        for (var i in arr) {
          arr[i].type == 1 ? arr[i].type_text = '国家体测' : arr[i].type_text = '技能体测'
          arr[i].state == 0 ? arr[i].state_text = '待开始' : arr[i].state == 1 ? arr[i].state_text = '进行中' : arr[i].state == 2 ? arr[i].state_text = '已结束' : ''

          if (Object.prototype.toString.call(arr[i].gradeInfo) === "[object Array]") {
            //数组
            var gradeInfo_arr = [];  //年级arr
            for (var n in arr[i].gradeInfo) {
              gradeInfo_arr.push(arr[i].gradeInfo[n].gradeName);
            }
            var gradeInfo_text = gradeInfo_arr.join('、'); //年级文字
            arr[i].gradeInfo_text = gradeInfo_text;
          } else {
            //对象
            arr[i].gradeInfo_text = arr[i].gradeInfo.gradeName
          }


          if (Object.prototype.toString.call(arr[i].gradeInfo) === "[object Array]") {
            //数组
            var gradeInfo_arr = [];  //年级arr
            for (var n in arr[i].gradeInfo) {
              gradeInfo_arr.push(arr[i].gradeInfo[n].gradeName);
            }
            var gradeInfo_text = gradeInfo_arr.join('、'); //年级文字
            arr[i].gradeInfo_text = gradeInfo_text;
          } else {
            //对象
            arr[i].gradeInfo_text = arr[i].gradeInfo.gradeName
          }


          if (Object.prototype.toString.call(arr[i].gradeInfo) === "[object Array]") {
            //数组
            var gradeInfo_arr = [];  //年级arr
            for (var n in arr[i].gradeInfo) {
              gradeInfo_arr.push(arr[i].gradeInfo[n].gradeName);
            }
            var gradeInfo_text = gradeInfo_arr.join('、'); //年级文字
            arr[i].gradeInfo_text = gradeInfo_text;
          } else {
            //对象
            arr[i].gradeInfo_text = arr[i].gradeInfo.gradeName
          }

          if (Object.prototype.toString.call(arr[i].gradeInfo) === "[object Array]") {
            //数组
            var gradeInfo_arr = [];  //年级arr
            for (var n in arr[i].gradeInfo) {
              gradeInfo_arr.push(arr[i].gradeInfo[n].gradeName);
            }
            var gradeInfo_text = gradeInfo_arr.join('、'); //年级文字
            arr[i].gradeInfo_text = gradeInfo_text;
          } else {
            //对象
            arr[i].gradeInfo_text = arr[i].gradeInfo.gradeName
          }


          var tijian_text = '';
          var tizhi_text = '';


          if (Object.prototype.toString.call(arr[i].projectInfo.examine) === "[object Array]") {
            //数组
            var tijian_arr = []; //体检arr
            for (var o in arr[i].projectInfo.examine) {
              tijian_arr.push(arr[i].projectInfo.examine[o].name);
            }
            tijian_text = tijian_arr.join('、'); //体检文字
          } else {
            //对象
            tijian_text = arr[i].projectInfo.examine.name;
          }

          if (Object.prototype.toString.call(arr[i].projectInfo.physical) === "[object Array]") {
            //数组
            var tizhi_arr = [];//体质arr
            for (var l in arr[i].projectInfo.physical) {
              tizhi_arr.push(arr[i].projectInfo.physical[l].name);
            }
            var tizhi_text = tizhi_arr.join('、'); //体质文字
          } else {
            console.log('对象')
            //对象
            tizhi_text = arr[i].projectInfo.physical.name;
          }
          if (tijian_arr.length > 0 && tizhi_arr.length > 0) {
            arr[i].exam_one = tijian_text + ',' + tizhi_text
          } else if (tijian_arr.length > 0 && tizhi_arr.length == 0) {
            arr[i].exam_one = tijian_text
          } else {
            arr[i].exam_one = tizhi_text
          }

        }
        this.tableData = arr;
        this.total = res.data.data.total; //总数
      }
        console.log('tableData111111', this.tableData);
    },
    // 删除考试管理
    async delete_exam(id) {
      const queryParam = JSON.parse(sessionStorage.getItem('userMsg'))
      const res = await delete_exam_list({
        orgId: queryParam.orgCode,
        termId: id,  //考试id

      })
      console.log('删除信息', res);
      if (res.data.errorCode == '0') {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.get_exam_list();

      } else {
        this.$message({
          type: 'warning',
          message: res.data.errorMsg
        });
      }
    },
    // 选择年级
    changeGrade(isGradeId) {
      var arr = this.gradeIds
      this.formScreen.classId = null
      for (const i in arr) {
        if (arr[i].gradeId == isGradeId) {
          this.downTemplateClass = arr[i].classInfoList
        }
      }
    },
    //  关闭蒙层
    downclose_meng() {
      this.downMeng = false;
    },
    // 打开蒙层
    open_meng() {
      this.downMeng = true;
    },
    // 操作
    change(id, type, name) {
      console.log(this.operVal);
      if (this.operVal == 1) {
        //  修改
        this.$router.push({ path: '/exam_details', query: { id: id } })
      }
      if (this.operVal == 2) {
        //  查看成绩
        this.$router.push({ path: '/exam', query: { id: id, type: type, name: name } })
      }
      if (this.operVal == 3) {
        //  上传成绩
        this.$router.push({ path: '/exam', query: { id: id, type: type, name: name } })
      }
      if (this.operVal == 4) {
        //  导出成绩

        this.open_meng();
        this.down_id = id;
        this.down_type = type;
        this.down_name = name;
      }
      if (this.operVal == 5) {
        //  生成报告
        this.$confirm('生成报告后，学生将收到报告，请谨慎操作', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.shengcheng_roport(id);

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消生成'
          });
        });
      }
      if (this.operVal == 6) {
        //  删除
        console.log('删除考试管理列表', id);
        this.delete_exam(id)
      }
      this.operVal = '';
    },
    // 可视化时间
    switchTimeFormat(time) {
      const dateTime = new Date(time)
      const year = dateTime.getFullYear()
      const month = dateTime.getMonth() + 1
      const date = dateTime.getDate()
      return `${year}-${month}-${date}`
    },
    // 分页函数
    changePage(newPage) {
      this.page = newPage; //页码
      console.log(newPage);
      this.get_exam_list()
    }
  },
  watch: {
    $route(val) {
      console.log(val, "333333333333333");
      this.get_exam_list()
    },
    termTime(news, olds) {
      console.log('新的', news);
      if (news == null || news == '') {
        this.termTime = '';
      }
      this.get_exam_list();
    },
    termId(news, olds) {
      console.log('新的', news);
      if (news == null || news == '') {
        this.termId = '';
      }
      this.get_exam_list();
    }
  }
}
</script>

<style lang="scss" scoped>
.zidingyi {
  /deep/ .el-input__inner,
  /deep/.el-input .el-input__count .el-input__count-inner {
    background-color: #f7fbfc;
    line-height: 0.2188rem;
    width: 0.9396rem !important;
    border-radius: 0.0521rem;
  }
}
/deep/.el-table th {
  font-size: 0.0938rem;
}
.container-homework {
  padding: 0.1667rem 0.1406rem;
  background-color: #fff;
  border-radius: 0.0781rem;
  // 筛选部分
  .screen {
    .tworow {
      display: flex;
      justify-content: space-between;
      .twoleft {
        display: flex;
        align-items: center;

        .change_input1 {
          width: 1.5rem;
          border-radius: 0.0521rem;
          overflow: hidden;
          margin-right: 0.1042rem;
        }
        /deep/ .el-input--medium .el-input__inner {
          color: #000;
          font-size: 0.0729rem;
          border: none;
          background-color: #f7fbfc;
          height: 0.2188rem;
          line-height: 0.2188rem;
        }
        /deep/ input::-webkit-input-placeholder {
          /* placeholder颜色  */
          color: #888888;
          font-size: 0.0729rem;
        }
        /deep/ .el-input--medium .el-input__icon {
          line-height: 0.218rem;
        }
        .el-button {
          width: 0.4479rem;
          height: 0.2188rem;
          background: #0fdd8d;
          color: #fff;
          border-radius: 0.0521rem;
        }
      }
      .tworight {
        .el-button {
          width: 0.7rem;
          height: 0.2188rem;
          background-color: #0fdd8d;
          border-radius: 0.0521rem;
          color: #fff;
          padding: 0;
        }
      }
    }
  }
  // 内容列表
  .conList {
    .conHeader {
      display: flex;
      justify-content: space-between;
      line-height: 0.1875rem;
      font-size: 0.0729rem;
      margin-bottom: 0.0781rem;
      div {
        color: #525252;
        span {
          color: #888888;
        }
      }
      /deep/.el-select > .el-input--medium > .el-input__inner,
      /deep/.el-input .el-input__count .el-input__count-inner {
        background-color: #f7fbfc;
        line-height: 0.2188rem;
        width: 0.7396rem;
        border-radius: 0.0521rem;
      }
    }
    .el-table {
      padding-bottom: 1px;
      /deep/.el-table__body-wrapper tr td{
        border: 1px solid transparent;
        border-right: none;
        border-left: none;
      }
      /deep/.el-table__body-wrapper tr td:first-child {
        border: 1px solid transparent;
        border-right: none;
      }
      /deep/.el-table__body-wrapper tr td:last-child {
        border: 1px solid transparent;
        border-left: none;
      }
      /deep/.el-table__body-wrapper tr:hover td {
        border: 1px solid #8ee7d1;
        border-right: none;
        border-left: none;
        box-sizing: border-box;
      }
      /deep/.el-table__body-wrapper tr:hover td:first-child {
        border: 1px solid #8ee7d1;
        border-right: none;
      }
      /deep/.el-table__body-wrapper tr:hover td:last-child {
        border: 1px solid #8ee7d1;
        border-left: none;
      }
      /deep/.el-input--medium .el-input__inner,
      .el-input--suffix .el-input__inner,
      .el-select .el-input__inner {
        width: 0.4479rem;
        height: 0.1875rem;
        background: #f8f8f8;
        border-radius: 0.0938rem;
        padding: 0 0.1042rem 0 0.1302rem;
        color: #888888;
      }
      /deep/.el-input__suffix {
        display: none;
      }
    }
  }
}

.add_meng {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 1111;
  display: flex;
  align-items: center;
  justify-content: center;
  .add_box {
    width: 36%;
    height: 2rem;
    background-color: white;
    border-radius: 0.07rem;
    padding: 0.1rem;
  }
}
.add_nav {
  display: flex;
  align-items: center;
  justify-content: space-between;

  > div:first-child {
    display: flex;
    align-items: center;
    p {
      font-size: 0.0938rem;
      color: #888888;
      margin-right: 14.9952px;
      padding-bottom: 0.1rem;
      border-bottom: 0.0156rem solid #fff;
      &:hover {
        cursor: pointer;
      }
    }
  }
  > div:nth-of-type(2) {
    padding-bottom: 0.1rem;
    img {
      width: 0.14rem;
      height: 0.14rem;
      &:hover {
        cursor: pointer;
      }
    }
  }
}
.add_heng {
  width: 100%;
  height: 0.0052rem;
  background-color: #0fdd8d;
  opacity: 0.3;
  position: relative;
  top: -0.0104rem;
}
.add_active {
  color: #0fdd8d !important;
  border-bottom: 0.0156rem solid #0fdd8d !important;
}
.add_button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15%;
  .el-upload:first-child {
    .excelImg {
      width: 0.8073rem;
      height: 0.93rem;
    }
  }
  .el-upload:last-child {
    .imImg {
      width: 1.2rem;
      margin-top: 0.2rem;
    }
  }
}

.add_meng {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 1111;
  display: flex;
  align-items: center;
  justify-content: center;
  .add_box {
    width: 36%;

    background-color: white;
    border-radius: 0.07rem;
    padding: 0.2rem;
    position: relative;
    > p:first-child {
      text-align: center;
      font-size: 0.1354rem;
      color: #525252;
    }
    .close_box {
      position: absolute;
      right: 0.1042rem;
      top: 0.1042rem;
      img {
        width: 0.14rem;
        height: 0.14rem;
        &:hover {
          cursor: pointer;
        }
      }
    }
    .add_search {
      margin: 0.2605rem 0;

      // 筛选搜索
      .el-form {
        height: 0.2188rem;
        display: flex;
        justify-content: center;

        /deep/.el-input--medium .el-input__inner,
        .el-input--suffix .el-input__inner,
        .el-select .el-input__inner {
          background-color: #f7fbfc;
          height: 0.2188rem;
          width: 0.7396rem;
          border-radius: 0.0521rem;
        }
      }
    }
    .add_buttons {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 100px;
      > p {
        padding: 0.0521rem 0.1563rem;
        font-size: 0.1042rem;
        color: #525252;
        border-radius: 0.0521rem;
        &:hover {
          cursor: pointer;
        }
      }
      > p:first-child {
        border: 0.0052rem solid #666;
        margin-right: 0.2604rem;
      }
      > p:nth-of-type(2) {
        border: 0.0052rem solid #0fdd8d;
        background-color: #0fdd8d;
        color: #fff;
      }
    }
  }
}
.close_box {
  position: absolute;
  right: 0.1042rem;
  top: 0.1042rem;
  img {
    width: 0.14rem;
    height: 0.14rem;
    &:hover {
      cursor: pointer;
    }
  }
}
</style>
